<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>朋友圈</title>
	<link rel="stylesheet" type="text/css" href="./qy/css/public.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
	<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
	<style type="text/css">
		body{
			position: relative;
		}
		.friend_contaienr{

		}
		.friend_header_contaienr{
			margin-bottom: 60px;
		}
		.friend_header_content{
			position: relative;
			height: 240px;
			width: 100%;
			
			background-size: cover;
		}

		.friend_headerHead_container{
			display: flex;
			justify-content: flex-end;
			position: absolute;
			right: 18px;
			bottom: -18px;
			z-index: 10;
		}
		.friend_headerHead_container p{
			color: #fff;
			text-shadow: 0px 0px 3px #000;
			padding-top: 5px;
			padding-right: 8px;
		}
		.friend_headerBg_content{
			width: 71px;
			height: 71px;
			border-radius: 5px;
			display: block;
		}
		.friend_headerFixed_container{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 9;
		}
		/*上传图片*/
		.uploadImgBtn {
			opacity: 0;
		 	left: 0;
		 	right: 0;
		 	bottom: 0;
		 	top: 0;
		 	position: absolute;
		    cursor: pointer;
		    background-image:url('');
		    -webkit-background-size: cover;
		    background-size: cover;
		  }
		 
		  .uploadImgBtn .uploadImg {
		    position: absolute;
		    right: 0;
		    top:0;
		    width: 100%;
		    height: 100%;
		    opacity: 0;
		    cursor: pointer;
		  }
		  .friend_mainToday_contaienr{
		  	display: flex;
		  	padding: 0 15px 15px 15px;
		  	border-bottom: 1px solid #f5f5f5;
		  }
		  .friend_mainToday_contaienr p{
		  	font-size: 20px;
		  	font-weight: bold;
		  }
		  .friend_mainToday_content{
		  	margin-left: 15px;
		  	width: 74px;
		  	height: 74px;
		  	display: flex;
		  	justify-content: center;
		  	background: #f7f7f7;
		  	align-items: center;
		  }
		  .friend_mainToday_content svg{
			width: 30px;
			height: 30px;
		  }
		  .friend_main_content{

		  }
		  .friend_main_content li{
		  	padding: 15px;
		  	display: flex;
		  }
		  .friend_mainList_head_content{
		  	width: 40px;
		  	height: 40px;
		  	border-radius: 5px;
		  	display: block;
		  	margin-right: 15px;
		  }
		  .friend_mainList_container{
			
		  }
		  .friend_mainList_container h4{
			font-size: 14px;
			color: #5778b8;
			font-weight: bold;
		  }
		  .friend_mainList_container p{
			font-size: 15px;
			color: rgba(0,0,0,0.85);
			font-weight: bold;
			padding-top: 4px;
		  }
		  .friend_mainList_img_container{
		  	width: 170px;
		  	position: relative;
		  	padding-top: 12px;
		  }
		  .friend_mainList_img_container img{
			width: 100%;
			height: auto;
			display: block;
		  }
		  .friend_mainList_img_container svg{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 45px;
			height: 45px;
		  }
		  .friend_mainListOther_container{
			margin-top: 12px;
			display: flex;
			align-items: center;
		  }
		  .friend_mainListOther_container span{
			font-size: 12px;
			color: #b5b5b5;
		  }
		  .friend_mainListOther_container b{
			color: #5778b8;
			font-size: 12px;
			margin-left: 20px;
			cursor: pointer;
		  }
		  .friend_mainList_link_container{
			display: flex;
			align-items: center;
			width: 200px;
			background: #f6f6f6;
			padding:10px;
			margin-top: 12px;
			border-radius: 5px;
		  }
		  .friend_mainList_linkLeft_container{
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			height: 58px;
			justify-content: space-evenly;
		  }
		  .friend_mainList_linkLeft_container p:first-child{
			font-size: 15px;
			font-weight: bold;
			color: #242424;
			font-weight: bold;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			padding-top: 0;
		  }
		  .friend_mainList_linkLeft_container p:last-child{
			font-size: 15px;
			color: #b5b5b5;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			padding-top: 0;
		  }
		  .friend_mainList_linkRight_container{
			width: 58px;
			height: 58px;
			background: #ededed;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
		  }
		  .friend_mainList_linkRight_container svg{
		  	width: 28px;
		  	height: 28px;
		  }
		  .outter{
		  	width: 20px !important;

		  }
		  /*浮动弹窗*/
		  .fixed_contaienr{
			position: fixed;
			left: 0;
			right: 0;
			top:0;
			bottom: 0;
			background: rgba(0,0,0,0.2);
			z-index: 1000;
		  }
		  .fixed_content{
			background: #f7f7f7;
			position: absolute;
			bottom: 0;
			opacity: 1;
			left: 0;
			right: 0;
			transition: all .3s;
			border-radius: 3px 3px 0 0;
			overflow: hidden;
		  }
		  .fixed_acitve{
		  	bottom: 0;
		  	opacity: 1;
		  }
		  .fixed_content li{
			padding: 15px 0;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333;
			font-size: 15px;
			border-bottom: 1px solid #ececec;
			background: #fff;
		  }
		  .fixed_content li:last-child{
		  	border-bottom: none;
		  	margin-top: 4px;
		  	border-top: 1px solid #ececec;
		  }
		  .fixed_content li a{
			font-size: 15px;
			color: #333;
			position: relative;
		  }
	</style>
</head>
<body>
	
	<div class="friend_contaienr">
		<div class="friend_header_contaienr">
			<!-- 背景图 -->
			<div class="friend_header_content" style="background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595852446873&di=6fa93d6…&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F22%2F20171022233758_y43Bf.jpeg)center center /cover;">
				<div class="friend_headerHead_container">
					<p>一只大贝贝</p>
					<img class="friend_headerBg_content" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg">
				</div>
				<div class="friend_headerFixed_container publicShowFixed" data-showdata="bg">
					<!-- 浮动层 点击换背景图层 -->
					
				</div>
			</div>
		</div>
		<div class="friend_main_contaienr">
			<div class="friend_mainToday_contaienr">
				<p>今天</p>
				<div class="friend_mainToday_content publicShowFixed" data-showdata="list">
					<svg t="1595990322320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2340"><path d="M512.000512 344.135828c-100.70868 0-182.350095 81.640392-182.350095 182.348048s81.641415 182.349071 182.350095 182.349071c100.70561 0 182.348048-81.641415 182.348048-182.349071S612.706121 344.135828 512.000512 344.135828z" p-id="2341"></path><path d="M879.229291 229.637074 754.566036 229.637074l-75.05951-83.400478L341.665055 146.236596l-72.67623 83.400478-124.219139 0c-44.26004 0-80.139202 36.56273-80.139202 81.669044l0 484.787218c0 45.105291 35.879162 81.669044 80.139202 81.669044l734.459604 0c44.262086 0 80.139202-36.56273 80.139202-81.669044L959.368492 311.306118C959.369515 266.200828 923.491377 229.637074 879.229291 229.637074zM512.000512 799.301402c-150.673651 0-272.817526-122.143874-272.817526-272.817526 0-150.671605 122.143874-272.816502 272.817526-272.816502 150.671605 0 272.815479 122.143874 272.815479 272.816502C784.814967 677.157527 662.672116 799.301402 512.000512 799.301402z" p-id="2342"></path></svg>
				</div>
			</div>
			<ul class="friend_main_content">
				<!-- 文字 -->
				<li>
					<img class="friend_mainList_head_content" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2955995520,1506508442&fm=26&gp=0.jpg">
					<div class="friend_mainList_container">
						<h4>名字名字</h4>
						<p>文字内容文字内容文字内容</p>
						<div class="friend_mainListOther_container">
							<span>3小时前</span>
							<b>删除</b>
						</div>
					</div>
				</li>
				<!-- 链接 -->
				<li>
					<img class="friend_mainList_head_content" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2955995520,1506508442&fm=26&gp=0.jpg">
					<div class="friend_mainList_container">
						<h4>名字名字</h4>
						<p>文字内容文字内容文字内容</p>
						<a href="https://www.baidu.com" class="friend_mainList_link_container">
							<div class="friend_mainList_linkLeft_container">
								<p>链接标题</p>
								<p>www.baidu.com</p>
							</div>
							<div class="friend_mainList_linkRight_container">
								<svg t="1596005825546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2547"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z" p-id="2548"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z" p-id="2549"></path></svg>
							</div>
						</a>
						<div class="friend_mainListOther_container">
							<span>3小时前</span>
							<b>删除</b>
						</div>
					</div>
				</li>
				<!-- 图片 -->
				<li>
					<img class="friend_mainList_head_content" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2955995520,1506508442&fm=26&gp=0.jpg">
					<div class="friend_mainList_container">
						<h4>名字名字</h4>
						<p>文字内容文字内容文字内容</p>
						<div class="friend_mainList_img_container">
							<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg">
						</div>
						<div class="friend_mainListOther_container">
							<span>3小时前</span>
							<b>删除</b>
						</div>
					</div>
				</li>
				<!-- 视频 -->
				<li>
					<img class="friend_mainList_head_content" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2955995520,1506508442&fm=26&gp=0.jpg">
					<div class="friend_mainList_container">
						<h4>名字名字</h4>
						<p>文字内容文字内容文字内容</p>
						<div class="friend_mainList_img_container">
							<div class="prism-player" id="player-con"></div>
						</div>
						<div class="friend_mainListOther_container">
							<span>3小时前</span>
							<b>删除</b>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="fixed_contaienr" style="display: none;">
		<ul class="fixed_content fixed_list_content" style="display: none;">
			<li>
				<a href="friendPublish.html">文字</a>
			</li>
			<li>
				<a href="friendPublish.html">图片</a>
			</li>
			<li>
				<a href="friendPublish.html">视频</a>
			</li>
			<li>
				<a href="friendPublish.html">图文</a>
			</li>
			<li class="removeFixedContainer">取消</li>
		</ul>
		<ul class="fixed_content fixed_bg_content" style="display: none;">
			<li>
				<a href="#">
				更换背景图
				<div class="uploadImgBtn" id="uploadImgBtn">
				    <input class="uploadImg" type="file" name="file" multiple id="file">
				</div>
				</a>
			</li>
			<li class="removeFixedContainer">取消</li>
		</ul>
	</div>
	<script src="/cdn/jquery.js"></script>
	<script type="text/javascript">
		$('.removeFixedContainer').click(function(e){

			$('.fixed_contaienr').hide();
			$('.fixed_bg_content').hide();
			$('.fixed_list_content').hide();
		});
		$('.publicShowFixed').click(function(e){
			console.log($(this).data("showdata"));
			if($(this).data("showdata") == "bg"){
				$('.fixed_contaienr').show();
				$('.fixed_bg_content').show();
			}else if($(this).data("showdata") == "list"){
				$('.fixed_contaienr').show();
				$('.fixed_list_content').show();
			}
			
		});
	</script>
	<!-- 点击更换背景图 -->
	<script>

	  $(document).ready(function(){
	    //为外面的盒子绑定一个点击事件0
	    $("#uploadImgBtn").click(function(){
	      /*
	      1、先获取input标签
	      2、给input标签绑定change事件
	      3、把图片回显
	       */
	//      1、先回去input标签
	      var $input = $("#file");
	//      2、给input标签绑定change事件
	      $input.on("change" , function(){
	        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
	        //获取选择图片的个数
	        var files = this.files;
	        var length = files.length;
	        console.log("选择了"+length+"张图片");
	        //3、回显
	        for( var i = 0 ; i < length ; i++ ){
	          var fr = new FileReader();
	          fr.onload = function(e){
	          	$('.fixed_contaienr').hide();
	          	$('.fixed_bg_content').hide();
	          	$('.fixed_list_content').hide();
	            console.log("回显了图片")
	            console.log(this.result);
	            $('.friend_header_content').css('background',"url("+this.result+")center center /cover")
	          }
	          fr.readAsDataURL(files[i]);//读取文件
	        }
	      })

	    })
	  })
	</script>
	<script>
	var player = new Aliplayer({
	  "id": "player-con",
	  "source": "https://jiasu.weidogs.com/sv/50f3ed36-173996c8260/50f3ed36-173996c8260.mp4?auth_key=1596007166-1d86b3d7988c401a937a9c0211b7ebb4-0-ed0b5d366d044100a6d8df88b976cac9",
	  "width": "170px",
	  "height": "128px",
	  "autoplay": false,
	  "isLive": false,
	  "cover": "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg",
	  "rePlay": false,
	  "playsinline": true,
	  "preload": false,
	  "controlBarVisibility": "hover",
	  "useH5Prism": true,
	  "skinLayout": [
	    {
	      "name": "bigPlayButton",
	      "align": "blabs",
	      "x": 50,
	      "y": 30
	    },
	    {
	      "name": "H5Loading",
	      "align": "cc"
	    },
	    {
	      "name": "errorDisplay",
	      "align": "tlabs",
	      "x": 0,
	      "y": 0
	    },
	    {
	      "name": "infoDisplay"
	    },
	    {
	      "name": "tooltip",
	      "align": "blabs",
	      "x": 0,
	      "y": 56
	    },
	    {
	      "name": "thumbnail"
	    },
	    {
	      "name": "controlBar",
	      "align": "blabs",
	      "x": 0,
	      "y": 0,
	      "children": [
	        {
	          "name": "progress",
	          "align": "blabs",
	          "x": 0,
	          "y": 44
	        },
	        {
	          "name": "playButton",
	          "align": "tl",
	          "x": 15,
	          "y": 12
	        },
	        {
	          "name": "timeDisplay",
	          "align": "tl",
	          "x": 10,
	          "y": 7
	        },
	        {
	          "name": "fullScreenButton",
	          "align": "tr",
	          "x": 10,
	          "y": 12
	        },
	        {
	          "name": "volume",
	          "align": "tr",
	          "x": 5,
	          "y": 10
	        }
	      ]
	    }
	  ]
	}, function (player) {
	    console.log("The player is created");
	  }
	);
	</script>
</body>
</html>